<template>
    <div>
        <div class="row justify-content-center">
            <div class="col-md-8 toastify-container">
                <h2 v-if="username" id="settings-title"><span v-bind:value="$t('settings.title')">User settings for [<b>{{username}}</b>]</span></h2>

                <div class="alert alert-success" role="alert" v-if="success" v-html="$t('settings.messages.success')">
                    <strong>Settings saved!</strong>
                </div>

                <div class="alert alert-danger" role="alert" v-if="errorEmailExists" v-html="$t('register.messages.error.emailexists')">
                    <strong>Email is already in use!</strong> Please choose another one.
                </div>

                <!--<jhi-alert-error></jhi-alert-error>-->

                <form name="form" id="settings-form" role="form" v-on:submit.prevent="save()" v-if="settingsAccount" novalidate>

                    <div class="form-group">
                        <label class="form-control-label" for="firstName" v-text="$t('settings.form.firstname')">First Name</label>
                        <input type="text" class="form-control" id="firstName" name="firstName" v-bind:placeholder="$t('settings.form[\'firstname.placeholder\']')"
                               :class="{'valid': !$v.settingsAccount.firstName.$invalid, 'invalid': $v.settingsAccount.firstName.$invalid }"
                               v-model="$v.settingsAccount.firstName.$model" minlength=1 maxlength=50 required>
                        <div v-if="$v.settingsAccount.firstName.$anyDirty && $v.settingsAccount.firstName.$invalid">
                            <small class="form-text text-danger"
                                   v-if="!$v.settingsAccount.firstName.required" v-text="$t('settings.messages.validate.firstname.required')">
                                Your first name is required.
                            </small>
                            <small class="form-text text-danger"
                                   v-if="!$v.settingsAccount.firstName.minLength" v-text="$t('settings.messages.validate.firstname.minlength')">
                                Your first name is required to be at least 1 character.
                            </small>
                            <small class="form-text text-danger"
                                   v-if="!$v.settingsAccount.firstName.maxLength" v-text="$t('settings.messages.validate.firstname.maxlength')">
                                Your first name cannot be longer than 50 characters.
                            </small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label" for="lastName" v-text="$t('settings.form.lastname')">Last Name</label>
                        <input type="text" class="form-control" id="lastName" name="lastName" v-bind:placeholder="$t('settings.form[\'lastname.placeholder\']')"
                               :class="{'valid': !$v.settingsAccount.lastName.$invalid, 'invalid': $v.settingsAccount.lastName.$invalid }"
                               v-model="$v.settingsAccount.lastName.$model" minlength=1 maxlength=50 required>
                        <div v-if="$v.settingsAccount.lastName.$anyDirty && $v.settingsAccount.lastName.$invalid">
                            <small class="form-text text-danger"
                                   v-if="!$v.settingsAccount.lastName.required" v-text="$t('settings.messages.validate.lastname.required')">
                                Your last name is required.
                            </small>
                            <small class="form-text text-danger"
                                   v-if="!$v.settingsAccount.lastName.minLength" v-text="$t('settings.messages.validate.lastname.minlength')">
                                Your last name is required to be at least 1 character.
                            </small>
                            <small class="form-text text-danger"
                                   v-if="!$v.settingsAccount.lastName.maxLength" v-text="$t('settings.messages.validate.lastname.maxlength')">
                                Your last name cannot be longer than 50 characters.
                            </small>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="form-control-label" for="email" v-text="$t('global.form[\'email.label\']')">Email</label>
                        <input type="email" class="form-control" id="email" name="email" v-bind:placeholder="$t('global.form[\'email.placeholder\']')"
                               :class="{'valid': !$v.settingsAccount.email.$invalid, 'invalid': $v.settingsAccount.email.$invalid }"
                               v-model="$v.settingsAccount.email.$model" minlength="5" maxlength="254" email required>
                        <div v-if="$v.settingsAccount.email.$anyDirty && $v.settingsAccount.email.$invalid">
                            <small class="form-text text-danger" v-if="!$v.settingsAccount.email.required"
                                   v-text="$t('global.messages.validate.email.required')">
                                Your email is required.
                            </small>
                            <small class="form-text text-danger" v-if="!$v.settingsAccount.email.email"
                                   v-text="$t('global.messages.validate.email.invalid')">
                                Your email is invalid.
                            </small>
                            <small class="form-text text-danger" v-if="!$v.settingsAccount.email.minLength"
                                   v-text="$t('global.messages.validate.email.minlength')">
                                Your email is required to be at least 5 characters.
                            </small>
                            <small class="form-text text-danger" v-if="!$v.settingsAccount.email.maxLength"
                                   v-text="$t('global.messages.validate.email.maxlength')">
                                Your email cannot be longer than 100 characters.
                            </small>
                        </div>
                    </div>
                    <div class="form-group" v-if="languages && Object.keys(languages).length > 1">
                        <label for="langKey" v-text="$t('settings.form.language')">Language</label>
                        <select class="form-control" id="langKey" name="langKey" v-model="settingsAccount.langKey">
                            <option v-for="(language, key) in languages" :value="key" :key="`lang-${key}`">{{language.name}}</option>
                        </select>
                    </div>
                    <button type="submit" :disabled="$v.settingsAccount.$invalid" class="btn btn-primary" v-text="$t('settings.form.button')">Save</button>
                </form>
            </div>
        </div>

    </div>
</template>

<script lang="ts" src="./settings.component.ts">
</script>
